<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 150px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div>
        123
    </div>
    <script>
        // function move(ele,type,target,t=50){

        //     // 目标  如果是opacity 乘以100   才有渐变的效果  
        //     if(type == 'opacity'){
        //         target *= 100;
        //     }
        //     var timer = setInterval(()=>{
        //         let current;
        //         if(type=='opacity'){
        //             // 获取值  如果是 opacity 乘以100 
        //             current = window.getComputedStyle(ele)[type] * 100
        //         }else{
        //             current = parseInt(window.getComputedStyle(ele)[type]);
        //         }
        //         // 每次变化的  (目标-元素新的位置)  /  10
        //         var duration = (target-current)/10;
        //         duration = duration>0?Math.ceil(duration):Math.floor(duration)
        //         if(current == target){
        //             clearInterval(timer)
        //         }
        //         else{
        //            if(type == 'opacity'){
        //             // 如果是opacity 除以100以后 赋值  
        //             // 元素 只接受  [0,1] 
        //             ele.style[type] = (current+duration)/100;
        //            }else{
        //             ele.style[type] = current+duration + 'px';
        //            }
                    
        //         }
                
        //     },t)
        // }

        // var divele = document.querySelector('div');
        //  divele.onclick = function(){
        //     move(this,'opacity',0.67);
        //     move(this,'width',666);
        //     move(this,'left',666);


        //  }

         // 问题  我想实现多个效果的过度  按照上面的代码 需要调用多次函数

         // 如何调用一次函数实现  多个效果的过度  

         // 解决方案1  添加形参个数  
         // move(元素,type1,typ2,typ3,type4,...typen,target,t=50)

         // 问题 如果按照这个方案  必须对等的实参 否则容易出错  

         //方案2  多个效果 放到对象中  
         // 效果 是对象的属性   有多少个属性 就有多少个效果   
         // 值 就是 目标
        //  move(ele,{'left':500,'width':666,opacity:0.72,'borderRadius':200})
        //  move(ele,{'left':500,'width':666})


        function move(ele,options,t=50){
            // 比上一次多一步 对options 进行遍历 
            // 拿出所有的键值对  
            // 键 是 效果类型  
            // 值 是 目标
            for(var k in options){
                // k 是效果类型
                const type = k;  // 如果这里是var 全局 
                // var 允许重名的 后边会把前面的覆盖掉  会发现多个效果只执行了最后一个
                // options[k] 目标值
                let target = options[k];

                if(type == 'opacity'){
                    target *= 100;
                }
                var timer = setInterval(()=>{
                    let current;
                    if(type=='opacity'){
                        // 获取值  如果是 opacity 乘以100 
                        current = window.getComputedStyle(ele)[type] * 100
                    }else{
                        current = parseInt(window.getComputedStyle(ele)[type]);
                    }
                    // 每次变化的  (目标-元素新的位置)  /  10
                    var duration = (target-current)/10;
                    duration = duration>0?Math.ceil(duration):Math.floor(duration)
                    if(current == target){
                        clearInterval(timer)
                    }
                    else{
                    if(type == 'opacity'){
                        // 如果是opacity 除以100以后 赋值  
                        // 元素 只接受  [0,1] 
                        ele.style[type] = (current+duration)/100;
                    }else{
                        ele.style[type] = current+duration + 'px';
                    }
                        
                    }
                    
                },t)


            }
           
        }

        document.querySelector('div').onclick = function(){

            move(this,{'left':500,'width':666,opacity:0.72,'borderRadius':200})
        }


        // 上面我们就实现了 多个效果 仅调用一次函数  即可


        
</script>

</body>
</html>
